<template>
    <div class="personalHome">
        <Personal-Header bgColor="#5741d9"></Personal-Header>
        <Personal-Side></Personal-Side>
        <div class="content">
            <h2 class="pagetitle">{{$t('l.personal_55')}}</h2>
            <div class="personCon">
                <div class="leftpanel">
                    <h2 class="persontitle">{{$t('l.personal_87')}}</h2>
                    <div class="resetpsdbar">
                        <p class="title">{{$t('l.personal_88')}}</p>
                        <div class="putgroup">
                            <input class="comput small" :class="intro.userType!==2?'disabled':''"  :disabled="intro.userType!==2" v-model="accountName">
                            <p class="errortext"></p>
                        </div>
                        <p class="title">{{$t('l.personal_89')}}</p>
                        <div class="putgroup">
                            <input class="comput small" v-model="accountNumber" :placeholder="$t('l.personal_90')">
                            <p class="errortext"></p>
                        </div>
                        <p class="title">{{$t('l.personal_91')}}</p>
                        <div class="payqrcodebar padbtm">
                            <label for="payqrcode">
                                <input type="file" id="payqrcode" name="file" ref="upInputer" @change="handleFileChange($event)" style="display:none;">
                                <div class="uploadimgbg">
                                    <img src="../../assets/images/picimg.png">
                                    <h2>{{$t('l.personal_92')}}</h2>
                                    <p>{{$t('l.personal_93')}}</p>
                                </div>
                                <span class="showupimg" v-show="imgurl">
                                    <img :src="curimg">
                                </span>
                            </label>
                        </div>
                        <a class="btn changebtn" @click="bindBankcard">{{$t('l.personal_20')}}</a>
                    </div>
                </div>
                <div class="rightpanel">
                    <div class="tipbox">
                        <p class="tiptitle">{{$t('l.personal_64')}}</p>
                        <p class="tiptext">1. {{$t('l.personal_65')}}！</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import PersonalHeader from "@/components/personalHeader";
import PersonalSide from "@/components/personalSide";
import lrz from 'lrz'
import {api} from '@/api/api';
export default {
    components: {
        PersonalHeader,
        PersonalSide
    },
    created(){
        this.intro = this.$store.state.userintro;
        if(this.intro.fullName){
            this.accountName = this.intro.fullName
        }else if(this.intro.cellPhone){
            this.accountName = this.intro.cellPhone
        }else{
            this.accountName = this.intro.email
        }
    },
    data(){
        return{
            file:"",
            imgurl:"",
            intro:"",
            accountNumber:"",
            curimg:"",
            accountName:""
        }
    },
    methods:{
        handleFileChange(data){
            let that = this;
            let file = data.target.files; 
            if(window.FileReader){
                var reader = new FileReader();
                reader.readAsDataURL(file[0]);
                reader.onloadend = function (e) {
                    that.curimg = e.target.result;
                    lrz( file[0], [ ] )  
                        .then(function(rst) {
                            //成功时执行
                            that.uploadImg(rst.base64);
                        }).catch(function(error) {
                            //失败时执行

                        }).always(function() {
                            //不管成功或失败，都会执行

                        })
                };
            }
        },
        //上传
        async uploadImg(data){
            let that = this;
            let res = await api.uploadImg({
                file:data
            })
            if(res.data.code==0){
                 that.imgurl = res.data.data;
            }else{
                that.$layer.msg(res.data.msg);
            }
        },
        //添加收款方式
        async bindBankcard(){
            let that = this;
            let res = await api.bindPayWay({
                accountName:that.accountName,
                accountNumber:that.accountNumber,
                accountType:1,
                bank:"",
                branchBank:"",
                qrCode:that.imgurl
            })
            if(res.data.code==0){
                that.$layer.msg(that.$t('l.other_a_37'));
                that.$router.push({
                    path: "/paymenttype"
                });
            }else if(res.data.code==1010001){
                that.$layer.msg(that.$t('l.add_55'));
            }else if(res.data.code==1010002){
                that.$layer.msg(that.$t('l.add_55'));
            }else if(res.data.code==1080003){
                that.$layer.msg(that.$t('l.add_91'));
            }else{
                that.$layer.msg(res.data.msg);
            }
        },
        async getPayList(){
            let that = this;
            let res = await api.paymentlist({
                pageNum:1,
                pageSize:100
            })
            if(res.data.code==0){
                that.payList = [];
                res.data.data.records.forEach((item,index)=>{
                    if(item.accountType==1){
                        that.accountNumber = item.accountNumber
                        that.curimg = item.qrCode
                        that.imgurl = item.qrCode
                        that.accountName = item.accountName
                    }
                })
            }else{
                that.$layer.msg(res.data.msg);
            }
        }
    },
    mounted(){
        this.getPayList();
    }
}
</script>
<style lang="less">
.personalHome {
	padding-top: 100px;
}
.personCon{
    padding:24px 30px;
    box-sizing: border-box;
    height: 90%;
    .rightpanel{
        .tipbox{
            height:455px;
            background:rgba(240,242,253,1);
            border-radius:4px;
            border:1px solid #2D8DFE;
            padding:34px 20px;
            box-sizing: border-box;
            .tiptitle{
                line-height:24px;
                font-weight:500;
                color:rgba(51,56,94,1);
                font-size:16px;
                padding-left:34px;
                background:url(../../assets/images/tip.png) no-repeat left center;
                margin-bottom:26px;
            }
            .tiptext{
                font-size:14px;
                font-weight:400;
                color:rgba(51,56,94,1);
                line-height:24px;
            }
        }
    }
    .leftpanel{
        .resetpsdbar{
            width:518px;
            margin:58px auto;
            .title{
                font-size:14px;
                font-weight:400;
                color:rgba(51,56,94,1);
                line-height:20px;
                padding-bottom:5px;
            }
            .padbtm{
                padding-bottom:20px;
            }
            .changebtn{
                width:100%;
                height:40px;
                margin-top:50px;
                line-height:40px;
            }
            .payqrcodebar{
                height:150px;
                border:1px dashed #DDE0EB;
                margin-top:10px;
                label{
                    width: 100%;
                    height: 172px;
                    display: block;
                    position:relative;
                }
                .uploadimgbg{
                    text-align:center;
                    padding-top:28px;
                    img{
                        width:31px;
                        height:32px;
                        padding-bottom:10px;
                    }
                    h2{
                        font-size:16px;
                        font-weight:400;
                        color:rgba(51,56,94,1);
                        line-height:24px;
                        padding-bottom:4px;
                    }
                    p{
                        font-size:14px;
                        font-weight:400;
                        color:rgba(51,56,94,1);
                        line-height:22px;
                    }
                }
                .showupimg{
                    position:absolute;
                    top:0;
                    left:0;
                    right:0;
                    bottom:2px;
                    z-index:9;
                    text-align:center;
                    line-height:172px;
                    background:#fff;
                    img{
                        max-width:100%;
                        max-height:100%;
                        vertical-align: middle;
                    }
                }
            }
        }
    }
}
</style>



